<template>
  <div>
    <input type="file" @change="handleFileChange" />
    <button @click="submitUpload">上传</button>

    <div>
      <video
          ref="videoPlayer"
          :src="videoUrl"
          controls
          autoplay
          @play="onPlay"
          @pause="onPause"
          @ended="onEnded"
          class="video-container"
      >
        <source :src="videoUrl" type="video/mp4">
        <source :src="webmVideoUrl" type="video/webm">
        您的浏览器不支持视频播放
      </video>
      <button @click="togglePlay">{{ isPlaying ? '暂停' : '播放' }}</button>
    </div>

  </div>
</template>

<script setup>
import { ref } from 'vue';
import { upload, test } from '@/api/about.js'; // 请根据实际路径调整

const selectedFile = ref(null);


function handleFileChange(event) {
  selectedFile.value = event.target.files[0];
}



async function submitUpload() {
  if (!selectedFile.value) {
    alert('请先选择文件');
    return;
  }

  const formData = new FormData();
  formData.append('file', selectedFile.value);

  try {
    // const response2 = await test();
    const response = await upload(formData);

    console.log('上传成功:', response.data);
    // console.log('测试成功:', response2.data);
  } catch (error) {
    console.error('上传失败:', error);
  }
}


const videoPlayer = ref(null); // 模板引用
const videoUrl = ref('http://1.94.233.8:19000/education-bucket/e9b7bfda-6fa4-4a68-b224-4dacd8c19c9c.mp4?X-Amz-Algorithm=AWS4-HMAC-SHA256&X-Amz-Credential=LUehxzp7pOpMKsMjLXWJ%2F20250516%2Fus-east-1%2Fs3%2Faws4_request&X-Amz-Date=20250516T163940Z&X-Amz-Expires=604800&X-Amz-SignedHeaders=host&X-Amz-Signature=91192aeaca0307f7f29fa8f3bd7f30b26feb1bd545fbf439ebe0225c5904f24a');
const webmVideoUrl = ref('http://1.94.233.8:19000/education-bucket/e9b7bfda-6fa4-4a68-b224-4dacd8c19c9c.mp4?X-Amz-Algorithm=AWS4-HMAC-SHA256&X-Amz-Credential=LUehxzp7pOpMKsMjLXWJ%2F20250516%2Fus-east-1%2Fs3%2Faws4_request&X-Amz-Date=20250516T163940Z&X-Amz-Expires=604800&X-Amz-SignedHeaders=host&X-Amz-Signature=91192aeaca0307f7f29fa8f3bd7f30b26feb1bd545fbf439ebe0225c5904f24a');
const isPlaying = ref(false);

const onPlay = () => {
  isPlaying.value = true;
  console.log('视频开始播放');
};

const onPause = () => {
  isPlaying.value = false;
  console.log('视频暂停');
};

const onEnded = () => {
  isPlaying.value = false;
  console.log('视频播放结束');
};

const togglePlay = () => {
  if (isPlaying.value) {
    videoPlayer.value.pause();
  } else {
    videoPlayer.value.play();
  }
};

</script>
<style>
.video-container {
  width: 800px;
  height: 450px;
  position: relative;
}
</style>